<template>
  <div>
    <div class="whiteBg" @click="hide">
      <div class="padding_common">
        <!-- 轮播图 -->
        <slide-img :divStyle="0" :bannerArry='banner'></slide-img>
      </div>
      <!--      商户信息-->
      <div class="merInfo_new">
        <div class="card_name">
          {{mcht.mchtSearch.name || mchtInfo.mchtName}}
        </div>
        <!-- <div class="coupon_info_item">
            <star :couponComScore="mcht.mchtSearch.mchtComScore||mchtInfo.mchtComScore"></star>
            <p class="info_pad info_pad_shop">{{mcht.mchtSearch.mchtComNum||mchtInfo.mchtComNum||0}}条</p>
        </div> -->
        <div class="shop_core clearfix">
          <star :couponComScore="mcht.mchtSearch.mchtComScore||mchtInfo.mchtComScore"></star>
          <p class="new_num">{{mcht.mchtSearch.mchtComNum || mchtInfo.mchtComNum || 0}}条</p>
        </div>
        <div class="coupon_info_item">
          <!-- <span v-if="mcht.flag=='false'" class="right">{{mcht.mchtSearch.distance | setDistance}}</span> -->
          <span v-if="mcht.flag" class="right">{{mcht.mchtSearch.distance | setDistance}}</span>
          <span class="right" style="margin-right: 0.5rem;">{{mcht.mchtSearch.mchtArea || mchtInfo.mchtArea}}</span>
          <span class="red1">￥{{mcht.mchtSearch.mchtPer || mchtInfo.mchtPer}}/人</span><span
            class="pad_l">{{mcht.mchtTypeValue}}</span>
        </div>
      </div>
    </div>
    <div class="couponDtlTab1" v-show="indexTab == 0 ">
      <div class="whiteBg" @click="hide" style="width: 96vw;margin: 1rem auto 0;">


        <!--      电子券信息-->
        <div class="coupon_dtl_coupon_new">
          <img style="position: absolute;width: 1rem;height:1rem;z-index: 4;left: 0;top: 0.5rem;"
               src="../../images/cashIcon.png"/>
          <div class="card_tit_new clearfix">

            <span class="right">有效期：{{couponParam.validatyEnd | strDate(3)}}</span>
            <p style="margin-left: 0.5rem;">{{couponParam.mchtName}}</p>
          </div>
          <div class="couponDiv">
            <coupon-denomination :item="couponParam"></coupon-denomination>
          </div>
          <div class="card_info">
            <div class="card_name">
              {{couponParam.couponName}}
            </div>
            <div class="coupon_info_item">
              <star :couponComScore="couponParam.comScore"></star>
              <p class="info_pad">
                {{couponParam.comNum || 0}}条 &nbsp;&nbsp;&nbsp;&nbsp;剩余{{couponParam.num || $route.query.num || 0}}张</p>
            </div>
            <div class="clear"></div>
            <div class="coupon_info_item color_gray">
              <div class="left" v-if="couponParam.usrId">
                <div class="coupon_dtl_avatar"><img :src="couponParam.usrPicUrl"></div>
                {{couponParam.usrName}}
              </div>
              <span :class="{right:couponParam.usrId}">已售出  &nbsp;&nbsp;{{couponParam.soldnum}}  &nbsp;已使用  &nbsp;&nbsp;{{couponParam.usednum}}</span>
            </div>
          </div>
        </div>
        <div class="centerPic">
          <img src="../../images/cardBg_04.png">

        </div>
        <div class="coupon_dtl_tit">使用须知</div>
        <div class="coupon_dtl_instr">
          <ul>
            <li v-if="scpoe"><span>{{scpoe + extra}}</span></li>
            <li><span>有效期{{couponParam.validatyBegin | strDate(3)}}至{{couponParam.validatyEnd | strDate(3)}}</span></li>
            <li v-if="couponParam.disableDate"><span>{{couponParam.disableDate | businessDay}}不可以使用</span></li>
            <li><span>使用时间：{{userTime | timeAnalysis}}</span></li>
            <li v-if="couponParam.restricted"><span>满{{couponParam.restricted}}元可使用</span></li>
          </ul>
        </div>
        <div class="coupon_dtl_instr2">
          <ul>
            <li v-if="diejia"><i class="iconfont icon-kediejiashiyong-"></i>可叠加使用{{couponParam.useNum}}张</li>
            <li v-if="gongtong"><i class="iconfont icon-keyuqitadianziquangongtongshiyong-"></i>可与其他电子券同时使用</li>
            <li><i class="iconfont icon-buzhaolingbuduixian-"></i>不找零不兑现</li>
          </ul>
        </div>
      </div>
    </div>

    <div class="botSpace"></div>
    <div class="exchangeBtn">

      <a @click="exchange(couponParam)" class="mainBtn">立即使用</a>
    </div>
  </div>
</template>
<script>
  import Vue from 'vue'
  import header from '../../componentes/global/header.vue'
  import slideImg from '../../componentes/global/slideImg.vue'
  import comments from '../../componentes/global/comments.vue'
  import star from '../../componentes/global/star.vue'
  import couponNum from '../../componentes/global/couponNum.vue'
  import getData from '../../service/getData.js'
  import getData2 from '../../service/getData2.js'
  import getData4 from '../../service/getData4.js'
  import * as types from '../../vuex/types.js'
  import {mapState} from 'vuex'
  import {Toast, MessageBox, Indicator} from 'mint-ui'
  import {Common} from 'src/utils/common.js'
  import {Storage} from 'src/utils/storage.js'

  export default {
    name: 'coupon-detail',
    data() {
      return {
        indexTab: 0,
        replyNum: '',
        replyShopNum: '',
        diejia: '',
        gongtong: '',
        userTime: '',
        mcht: {mchtSearch: {}},
        replyStyle: '',
        indexCom: 3,
        commId: '',
        commentCont: '',
        boxStatus: false,
        picture: '',
        allStatus: true,
        collectStatus: false,
        collectIndex: '',
        param: {},
        couponParam: {},
        telephone: '',
        extra: '',
        banner: [],
        scpoe: "",
        mchtInfo: {}
      }
    },
    watch: {
      couponParam: {
        deep: true,
        handler(val) {
          if (val.couponName) {

          }
        }
      }
    },
    components: {
      comments, star, couponNum, slideImg
    },
    created: function () {
      this.$store.commit(types.SHOP_COMMENTS);//初始化列表
      this.$store.commit(types.COUPON_COMMENTS);//初始化列表
      this.$store.commit("COUPON_PAGES");//评论分页初始化
      //电子券详情
      let me = this;
      var route = this.$route.query,
        store = Storage.get("couponInfo");

      let data = this.$route.query
      this.param = {
        couponId: data.couponId,
        mchtId: data.mchtId.toString(),
        seqNo: data.seq.toString(),
        usrId: data.usrId.toString(),
        usrPicId: data.usrPicId.toString()
      };
      // Indicator.open('加载中...');
      this.$store.commit('changeState', true)
      //过滤使用须知
      getData4.getDishType({mchtId: me.param.mchtId}).then(data => {
        var scpoeList = data.content.lowTypeNameList;
        if (data.respCode != '00') {
          Toast({
            message: rep.errorInfo,
            duration: 800
          });
        }
        //电子券详情
        getData.getCouponInfo({
          "method": 'post',
          data: {
            "couponId": me.param.couponId,
            "mchtId": me.param.mchtId,
            "seqNo": me.param.seqNo,
            "usrId": me.param.usrId,
            "usrPicId": me.param.usrPicId
          }
        }).then(rep => {
          if (rep.respCode == '00') {
            rep.content.couponId = me.param.couponId;
            me.couponParam = rep.content;
            if (rep.content) {
              me.$store.commit(types.HEAD_TEXT, rep.content.couponName);
              me.diejia = rep.content.useRule.indexOf("M") >= 0;
              me.gongtong = rep.content.useRule.indexOf("D") >= 0;
              // me.userTime = rep.content.useTime.split(",").join(" ");
              me.userTime = rep.content.useTime;
              if (rep.content.scpoe.indexOf("T") >= 0) {
                me.extra = "不可用"
              } else {
                me.extra = "可用"
              }

              //获取商户可用或非可用菜类列表
              let scpoe = rep.content.scpoe.substr(1, rep.content.scpoe.length + 1).split(",")
              let type = [];
              scpoe.find(data => {
                scpoeList.forEach(value => {
                  if (value.typeId == data) {
                    type.push(value.typeName);
                  }
                })
                me.scpoe = type.join("、")
              })
            }
            ;
          } else {
            Toast({
              message: rep.errorInfo,
              duration: 800
            });
          }
        })
      });
      //获取商户菜单类型

      //商户详情  || '121.47,31.23'
      // console.log(me.position)
      var cityGet = Storage.get("city", true);
      getData.mchtNew({
        method: 'post',
        data: {cityName: cityGet, position: me.position},
        mchtId: me.param.mchtId
      }).then(rep => {
        if (!rep.content.mchtSearch) {
          getData.mchtNo({mchtId: me.param.mchtId}).then(rep => {
            me.mchtInfo = rep.content.mcht;
            me.mcht.mchtTypeValue = rep.content.mchtTypeValue;
            me.mcht.num = rep.content.num;
            me.mcht.mchtBusTime = rep.content.mcht.mchtBusTime.replace(/\s+/g, "")
            me.mcht.mchtBusDay = rep.content.mcht.mchtBusDay
            me.telephone = 'tel:' + rep.content.mcht.mchtTel1;
            me.mcht.mchtBusDay2 = rep.content.mcht.mchtBusDay2
            if (rep.content.mcht.mchtBusTime2) {
              me.mcht.mchtBusTime2 = rep.content.mcht.mchtBusTime2.replace(/\s+/g, "")
            }
          });
        } else {
          me.mcht = rep.content;
          me.mchtInfo = rep.content;
          me.mchtInfo.mchtId = rep.content.mchtSearch.id;
          me.mcht.mchtBusTime = me.mcht.mchtBusTime.replace(/\s+/g, "")
          me.telephone = 'tel:' + rep.content.mchtTel1;
          if (me.mcht.mchtBusTime2) {
            me.mcht.mchtBusTime2 = me.mcht.mchtBusTime2.replace(/\s+/g, "")
          }
        }
      });

      //商户广告
      this.shopBanner();


    },
    computed: {
      ...mapState({
        userInfo: state => state.user.userInfo,
        couponInfo: state => state.coupon.couponInfo,
        couponComments: state => state.coupon.couponComments,
        shopComments: state => state.coupon.shopComments,
        couponDetail: state => state.coupon.couponDetail,
        setOwnerInfo: state => state.coupon.setOwnerInfo,
        position: state => state.coupon.position,//用户地理位置
      }),
    },
    filters: {
      timeAnalysis: function (value) {
        if (!value) {
          return;
        }
        ;
        if (value.indexOf('null') > 0) {
          value = value.substring(0, value.indexOf(','));
        }
        return value
      }
    },
    methods: {

      exchange: function (couponParam) {
        let me = this;
        getData.findCode({
          method: 'post',
          data: {
            couponId: couponParam.couponId,
            mchtId: couponParam.mchtId,
            usrId: me.userInfo.usrId
          }
        }).then(function (rep) {
          if (rep.respCode == '01') {
            Toast({
              message: rep.errorInfo,
              duration: 1000
            });
          } else {
            me.couponParam.num = me.$route.query.num
            me.$router.push({
              'name': 'positiveScan', query: {
                couponParam: couponParam
              }
            });
          }
        })


      },
      //查看商户所在位置
      getPosition: function () {
        let me = this;
        var po_array = me.mcht.mchtSearch.position.split(" ");
        wx.openLocation({
          latitude: parseFloat(po_array[1]), // 纬度，浮点数，范围为90 ~ -90
          longitude: parseFloat(po_array[0]), // 经度，浮点数，范围为180 ~ -180。
          name: me.mcht.mchtSearch.name, // 位置名
          address: '', // 地址详情说明
          scale: 12, // 地图缩放级别,整形值,范围从1~28。默认为最大
          infoUrl: '' // 在查看位置界面底部显示的超链接,可点击跳转
        });
      },

      //商户广告
      shopBanner: function () {
        var me = this;
        // console.log(me.param)
        getData2.shopBanner({
          method: 'post',
          data: {"aoData": "", "mchtId": me.param.mchtId, "state": ""}
        }).then(function (rep) {
          // console.log(1111)
          me.banner = rep.content.list;
        })
      }
      /**
       * 获取信息
       */
    }
  }
</script>
<style scoped>
  .mer_position p {
    position: relative;
  }

  .mer_position p span {
    max-height: 2.5rem;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    position: absolute;
    top: 50%;
    transform: translateY(-50%)
  }

  .card_info .card_name {
    width: -webkit-calc(100% - 3rem);
    width: calc(100% - 3rem);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .info_pad {
    line-height: 1.5rem;
    height: 1.4rem
  }

  .card_info .color_gray {
    margin-top: 0.2rem;
  }

  .info_pad_shop {
    line-height: 1.9rem;
  }

  /*9-27新增*/
  .new_num {
    color: #999;
    font-size: 0.85rem;
    padding-left: 0.8rem;
    overflow: hidden;
    line-height: 1.5rem;
    height: 1.4rem;
  }

  .shop_core {
    padding: 0.4rem 0 0.3rem;
  }

  .centerPic {
    z-index: 2;
    width: 100%;
    background-color: rgb(245, 245, 245);
  }

  .centerPic img {
    display: block;
    width: 100%
  }

  .coupon_dtl_coupon_new {
    position: relative;
    margin: 0 .667rem;
    padding: .2rem .667rem .5rem;
  }

  .merInfo_new {
    margin: 0 .677rem;
    padding: .667rem;
  }

  .card_tit_new {
    overflow: hidden;
    border-bottom: 1px solid #E6E6E6;
    color: #999;
    font-size: .8rem;
    line-height: 1.8rem
  }
</style>
